<template>
  <div style="text-align: center">
    <el-transfer
      v-model="selectedOptions"
      filterable="true"
      :filter-method="filterMethod"
      :data="optionalOptions"
      :titles="['可选择项', '已选择项']"
      filter-placeholder="您可以输入名称搜索"
      class="transfer"
    />
    <el-button class="submitButton" type="primary" @click="commit" plain>提交</el-button>
  </div>
</template>

<script>
import request from "@/utils/forward/request";

export default {
  data() {
    return {
      patientHistoryId: this.$store.state.doctorOptions.patientHistoryId,
      examinationId: "",
      allOptions: [],
      selectedOptions: [],
      optionalOptions: [],
      selectedOptions: [],
    };
  },
  methods: {
    commit() {
      //提交selectedOptions到后端，删除和插入
      const commitInfo = {
        examinationId: this.examinationId,
        selectedOptionKeys: this.selectedOptions,
      };
      request("post", "checkItem/commitInfoToChecks", commitInfo).then((res) => {
        //提示提交成功信息
        if (res.result) {
          this.$message.success("提交成功！");
        } else {
          this.$message.err("提交失败！");
        }
      });
    },
  },
  async mounted() {
    // const store = this.$store;
    // const that = this;
    const patientHistoryInfo = {
      patientHistoryId: this.patientHistoryId,
    };
    //获取检查总项的ID，若为首次创建检查总项并返回ID
    await request(
      "post",
      "doctor/check/createAndGetExaminationId",
      patientHistoryInfo
    ).then((res) => {
      //拿到检查ID存到vuex，以及本页的数据
      this.$store.commit("doctorOptions/setExaminationId", res.result);
      this.examinationId = res.result;
    });

    // axios
    //   .post("/api/doctor/check/createAndGetExaminationId", patientHistoryInfo)
    //   .then((response) => {
    //     console.log(response.data);
    //     store.commit("doctorOptions/setExaminationId", response.data.result);
    //     that.examinationId = response.data.result;
    //     console.log(that.examinationId);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    // 从后端拿到库中所有的检查项（K，V）
    await request("get", "doctor/check/getChecksByType", { type: "checks" }).then(
      (res) => {
        //拿到的值按照{key,label}存入到optionalOptions
        console.log(res.result);
        res.result.forEach((e) => {
          this.optionalOptions.push({
            key: e.K,
            label: e.V,
          });
        });
      }
    );
    // axios
    //   .get("/api/doctor/check/getChecksByType", {
    //     params: {
    //       type: "checks",
    //     },
    //   })
    //   .then(function (response) {
    //     console.log(response.data.result);
    //     response.data.result.forEach((e) => {
    //       that.optionalOptions.push({
    //         key: e.K,
    //         label: e.V,
    //       });
    //     });
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    //获取右边已选择的数据(根据examinationId查询checkItem表中的所有项ID)
    let checkId = this.examinationId;
    console.log(checkId);

    await request("get", "checkItem/getCheckCodesIdListByCheckId", {
      checkId: checkId,
    }).then((res) => {
      this.selectedOptions = res.result;
      console.log(res.result);
    });
    // axios
    //   .get("/api/checkItem/getCheckCodesIdListByCheckId", {
    //     params: {
    //       checkId: checkId,
    //     },
    //   })
    //   .then((res) => {
    //     that.selectedOptions = res.data.result;
    //     console.log(res.data.result);
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
  },
};
</script>

<style>
.transfer {
  margin-left: 200px;
  margin-top: 5%;
  padding: 10px 6px;
  text-align: left;
}
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
.submitButton {
  margin-left: 700px;
}
</style>
